<template>
	<view class="container">
		<!--  #ifdef APP-PLUS-->
		<uni-nav-bar fixed='true' @clickLeft='back' statusBar='true' style="width: 100%;">
		
			<view slot='left'>
				<text class="cuIcon-back"></text>
		
			</view>
			<view class="status-center padding-left center bg-F4F4F4  round" style="height: 70rpx;margin-left: -30px;">
				<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
				</image>
				<input type="text" @input='search' v-model="word" value="" class="text-13 f-grow1 padding-left-sm"
					placeholder="请输入订单描述关键字" />
			</view>
		
		</uni-nav-bar>
		<!--  #endif -->
		<view class="bg-white">
			<!--  #ifdef   MP-WEIXIN -->
			<kg-custom :isBack="true" bgColor="bg-white">
				<block slot="left">
					<view class="flex justify-start align-center bg-F4F4F4 padding-left round margin-left-sm"
						style="height: 70rpx;width: 460rpx;">
						<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
						</image>
						<input type="text" @input='search' v-model="word" value="" class="text-13 f-grow1 padding-left-sm"
							placeholder="请输入订单描述关键字" />
					</view>
				</block>
			</kg-custom>
				<!--  #endif -->
			<view class="padding-sm">
				<view class="round flex justify-between align-center bg-color tabs text-df text-white">
					<view :class="{on:mechanicAuditStatus==1}" class="tab round text-center" @click="checkType(1)">
						我要派单
					</view>
					<view :class="{on:mechanicAuditStatus==0}" class="tab round text-center" @click="checkType(0)">
						我派的单
					</view>
				</view>
			</view>

			<view class="text-15 flex justify-start align-center margin-top-sm" v-if='mechanicAuditStatus==1'>
				<scroll-view scroll-x class="bg-white nav text-666" style="width: calc(100% - 87rpx);"
					scroll-with-animation :scroll-left="scrollLeft">

					<view class="cu-item" :class="item.id==TabCur?'color cur text-bold':''" v-for="item in typeList"
						@tap="tabSelect" :data-id="item.id">
						{{item.name}}
					</view>
				</scroll-view>
				<view class="color" style="min-width: 87rpx;" @click="handSearch">
					筛选
				</view>
			</view>
		</view>
		<view      @click="toPage('/filePage/pages/orderServiceDetail/orderServiceDetail?id='+item.id+'&paidan=1')" class="bg-white radius10 padding-sm margin-sm" v-for='(item,index) in list' :key='index'>
			<view class="flex justify-between align-center text-bold">
				<view class="title">
					{{item.description}}
				</view>
				<view class="color text-sm" v-if='mechanicAuditStatus==1'>
					<block v-if='item.serviceStatus==0'>待付款</block>
					<block v-if='item.serviceStatus==1'>待接单</block>
					<block v-if='item.serviceStatus==2'>已接单</block>
					<block v-if='item.serviceStatus==3'>已完成</block>
					<block v-if='item.serviceStatus==4'>已验收</block>
					<block v-if='item.serviceStatus==5'>已评价</block>
					<block v-if='item.serviceStatus==6'>已取消</block>
				</view>
				 <view v-else>
					 <block v-if='item.applyAuditStatus==0'>派单中</block>
					 <block v-else-if="item.applyAuditStatus==1">已接单</block>
					 <block v-else>已拒绝</block>
				 </view>

			</view>
			<view class="flex justify-start nickname">

				<view class=" flex-treble text-13 text-999">
					<view>{{item.sysCategoryName}}</view>
					<view class="flex justify-between prices">
						<view class="flex" style="align-items: center;">
							<text style="color: #F45D1B;">￥</text><text class="price">{{item.price/100}}</text>
							<text class="order-type">{{item.title}}</text>
						</view>
						<view>倒计时 {{item.pastTime}}小时</view>

					</view>
					<view class="flex justify-end align-center" style="margin-top: 39rpx;">
						<!-- 	<view class="flex">
							<view>技工(高级技工)</view>
							<view>重新派单</view>
						</view> -->
						<block v-if='item.serviceType==1 && item.serviceStatus==1'>
							<view class="send"
								@click.stop="toPage('/filePage/pages/service-mechanic/service-mechanic?issue='+item.id+'&shopId='+item.shopId)">
								派单
							</view>
						</block>
						<!-- 	<block>
							<view class="send" @click="toPage('/filePage/pages/service-mechanic/service-mechanic?issue='+item.id+'&shopId='+item.shopId)">
								派单
							</view>
						</block> -->

					</view>

				</view>
			</view>
		</view>


		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				mechanicAuditStatus: 1,
				scrollLeft: 0,
				TabCur: '',
				userName: '',
				userMobile: '',
				word: '',
				loading: "more",
				typeList: [{
						id: 0,
						name: '全部'
					}, {
						name: '待接单',
						id: '1'
					}, {
						name: '已接单',
						id: '2'
					}, {
						name: '已完成',
						id: '3'
					},
					{
						name: '已验收',
						id: '4'
					},
					{
						name: '已评价',
						id: '5'
					},
					{
						name: '已取消',
						id: '6'
					}
				],
				type: ''
			};
		},
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					let obj = null
					let api = ''
					if (this.mechanicAuditStatus == 1) {
						api = 'listOrderServicePool'
						obj = {
							pageNum: page,
							pageSize: 10,
							userId: uni.getStorageSync('userId'),
							receiverId: uni.getStorageSync('userId'),
						}
						if (this.TabCur != 0) {
							obj['serviceStatus'] = this.TabCur
						}
					}
					if (this.mechanicAuditStatus == 0) {
						api = 'listOrderServicePoolApply'
						obj = {
							pageNum: page,
							pageSize: 10,
						}
					}

					if (this.type == 1) {
						obj['shopId'] = uni.getStorageSync("shopIdApply")
					} else {
						obj['shopId'] = uni.getStorageSync("shopServiceIdApply")
					}

                    if(this.word){
						obj['keywords'] = this.word
					}
					

					const [err, res] = await this.$get(this.$api[api], obj)
					if (res) {
						var data = res.data.list
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}

		},
		methods: {
			back() {
				console.log(1111)
				uni.navigateBack({
			
				})
			},
			checkType(index) {
				this.mechanicAuditStatus = index
				this.Refresh()
			},
			toPage(url) {
				console.log(url)
				this.$util.openNewPage(url)
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log(this.scrollLeft)
				this.Refresh()
			},
			search(){
                 this.Refresh()
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		.on {
			border-bottom: 6rpx solid #ED7200;
			font-weight: bold;
			color: #221815;
		}

		view {
			border-bottom: 6rpx solid #fff;
		}
	}

	.btn2 {
		padding: 20rpx 24rpx;
		border: 2rpx solid;
	}

	.footer {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 98rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.tabs {
		padding: 4rpx;

		.tab {
			width: 350rpx;
			padding: 16rpx;
		}

		.on {
			background: #fff;
			color: #ED7200;
			font-weight: bold;
		}
	}

	.title {

		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.nickname {
		margin-top: 22rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.prices {
		margin-top: 52rpx;
		display: flex;
		align-items: center;
	}

	.price {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #F45D1B;

	}

	.order-type {
		margin-left: 23rpx;
	}

	.send {
		padding: 20rpx 23rpx;
		background: #ED7200;
		border-radius: 32rpx;
		color: #fff;
	}
	.status-center {
		width: 460rpx;
		display: flex;
		align-items: center;
	}
</style>
